
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>样式级联 · 前端开发2018</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="yangjh">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-ace/ace.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-bibtex-indexed-cite/style.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../styles/website.css">
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="unit.html" />
    
    
    <link rel="prev" href="selector.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    
    
        
        <li>
            <a href="http://yangzh.cn" target="_blank" class="custom-link">Home</a>
        </li>
    
        
        <li>
            <a href="http://yangjh.gitee.io/appendix" target="_blank" class="custom-link">开始之前</a>
        </li>
    
    

    
    <li class="divider"></li>
    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                        <b>1.1.</b>
                    
                    前言
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">HTML</li>
        
        
    
        <li class="chapter " data-level="2.1" data-path="../html/history.html">
            
                <a href="../html/history.html">
            
                    
                        <b>2.1.</b>
                    
                    HTML简史
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="../html/webstandard.html">
            
                <a href="../html/webstandard.html">
            
                    
                        <b>2.2.</b>
                    
                    Web标准
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3" data-path="../html/htmlterm.html">
            
                <a href="../html/htmlterm.html">
            
                    
                        <b>2.3.</b>
                    
                    HTML语法
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.3.1" data-path="../html/html.html">
            
                <a href="../html/html.html">
            
                    
                        <b>2.3.1.</b>
                    
                    文档根元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.2" data-path="../html/metadata.html">
            
                <a href="../html/metadata.html">
            
                    
                        <b>2.3.2.</b>
                    
                    文档元数据相关元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.3" data-path="../html/sections.html">
            
                <a href="../html/sections.html">
            
                    
                        <b>2.3.3.</b>
                    
                    区块元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.4" data-path="../html/grouping.html">
            
                <a href="../html/grouping.html">
            
                    
                        <b>2.3.4.</b>
                    
                    内容组织元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.5" data-path="../html/text.html">
            
                <a href="../html/text.html">
            
                    
                        <b>2.3.5.</b>
                    
                    文本语义元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.6" data-path="../html/edits.html">
            
                <a href="../html/edits.html">
            
                    
                        <b>2.3.6.</b>
                    
                    编辑元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.7" data-path="../html/embed.html">
            
                <a href="../html/embed.html">
            
                    
                        <b>2.3.7.</b>
                    
                    嵌入内容元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.8" data-path="../html/table.html">
            
                <a href="../html/table.html">
            
                    
                        <b>2.3.8.</b>
                    
                    表格元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.9" data-path="../html/form.html">
            
                <a href="../html/form.html">
            
                    
                        <b>2.3.9.</b>
                    
                    表单元素
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="2.3.10" data-path="../html/script.html">
            
                <a href="../html/script.html">
            
                    
                        <b>2.3.10.</b>
                    
                    脚本元素
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    
        
        <li class="header">CSS</li>
        
        
    
        <li class="chapter " data-level="3.1" data-path="intro.html">
            
                <a href="intro.html">
            
                    
                        <b>3.1.</b>
                    
                    CSS简介
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="thewayofuse.html">
            
                <a href="thewayofuse.html">
            
                    
                        <b>3.2.</b>
                    
                    使用CSS的三种方式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="statement.html">
            
                <a href="statement.html">
            
                    
                        <b>3.3.</b>
                    
                    CSS语法与规则
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="selector.html">
            
                <a href="selector.html">
            
                    
                        <b>3.4.</b>
                    
                    CSS选择器
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="3.5" data-path="cascade.html">
            
                <a href="cascade.html">
            
                    
                        <b>3.5.</b>
                    
                    样式级联
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="unit.html">
            
                <a href="unit.html">
            
                    
                        <b>3.6.</b>
                    
                    CSS中的度量单位
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="text.html">
            
                <a href="text.html">
            
                    
                        <b>3.7.</b>
                    
                    CSS文本样式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.8" data-path="background.html">
            
                <a href="background.html">
            
                    
                        <b>3.8.</b>
                    
                    CSS背景属性
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.9" data-path="box.html">
            
                <a href="box.html">
            
                    
                        <b>3.9.</b>
                    
                    CSS盒模型
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.10" data-path="position.html">
            
                <a href="position.html">
            
                    
                        <b>3.10.</b>
                    
                    CSS中的定位
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.11" data-path="resetcss.html">
            
                <a href="resetcss.html">
            
                    
                        <b>3.11.</b>
                    
                    Reset css
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.12" data-path="transform.html">
            
                <a href="transform.html">
            
                    
                        <b>3.12.</b>
                    
                    变形
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.13" data-path="animate.html">
            
                <a href="animate.html">
            
                    
                        <b>3.13.</b>
                    
                    动画
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="3.14" data-path="flex.html">
            
                <a href="flex.html">
            
                    
                        <b>3.14.</b>
                    
                    Flex box布局模型
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">JavaScript</li>
        
        
    
        <li class="chapter " data-level="4.1" data-path="../js/introjs.html">
            
                <a href="../js/introjs.html">
            
                    
                        <b>4.1.</b>
                    
                    JavaScipt
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.2" data-path="../js/thewayofuse.html">
            
                <a href="../js/thewayofuse.html">
            
                    
                        <b>4.2.</b>
                    
                    在html中使用js的方式
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.3" data-path="../js/jscoresyntax.html">
            
                <a href="../js/jscoresyntax.html">
            
                    
                        <b>4.3.</b>
                    
                    JavaScipt核心语法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.4" data-path="../js/operators.html">
            
                <a href="../js/operators.html">
            
                    
                        <b>4.4.</b>
                    
                    JavaScipt的运算符
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.5" data-path="../js/statements.html">
            
                <a href="../js/statements.html">
            
                    
                        <b>4.5.</b>
                    
                    JavaScipt声明与语句
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.6" data-path="../js/jstype.html">
            
                <a href="../js/jstype.html">
            
                    
                        <b>4.6.</b>
                    
                    JavaScipt数据类型
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.6.1" data-path="../js/jsobject.html">
            
                <a href="../js/jsobject.html">
            
                    
                        <b>4.6.1.</b>
                    
                    JavaScipt对象
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.6.2" data-path="../js/jsfunction.html">
            
                <a href="../js/jsfunction.html">
            
                    
                        <b>4.6.2.</b>
                    
                    JavaScipt函数
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.6.3" data-path="../js/jsarray.html">
            
                <a href="../js/jsarray.html">
            
                    
                        <b>4.6.3.</b>
                    
                    JavaScipt数组
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.7" data-path="../js/globalobjects.html">
            
                <a href="../js/globalobjects.html">
            
                    
                        <b>4.7.</b>
                    
                    JavaScipt内置对象
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="4.7.1" data-path="../js/jsbom.html">
            
                <a href="../js/jsbom.html">
            
                    
                        <b>4.7.1.</b>
                    
                    BOM
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.7.2" data-path="../js/jsdom.html">
            
                <a href="../js/jsdom.html">
            
                    
                        <b>4.7.2.</b>
                    
                    DOM
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="4.7.3" data-path="../js/json.html">
            
                <a href="../js/json.html">
            
                    
                        <b>4.7.3.</b>
                    
                    JSON
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4.8" data-path="../js/jsevent.html">
            
                <a href="../js/jsevent.html">
            
                    
                        <b>4.8.</b>
                    
                    JavaScript事件
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">ES6</li>
        
        
    
        <li class="chapter " data-level="5.1" data-path="../es6/promise.html">
            
                <a href="../es6/promise.html">
            
                    
                        <b>5.1.</b>
                    
                    Promise
            
                </a>
            

            
        </li>
    

    
        
        <li class="header">less</li>
        
        
    

    
        
        <li class="header">前端框架</li>
        
        
    

    
        
        <li class="header">jQuery</li>
        
        
    
        <li class="chapter " data-level="8.1" data-path="../jQuery/Readme.html">
            
                <a href="../jQuery/Readme.html">
            
                    
                        <b>8.1.</b>
                    
                    jQuery简介
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.2" data-path="../jQuery/Concept.html">
            
                <a href="../jQuery/Concept.html">
            
                    
                        <b>8.2.</b>
                    
                    jQuery基础概念
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="8.2.1" data-path="../jQuery/Dollar.html">
            
                <a href="../jQuery/Dollar.html">
            
                    
                        <b>8.2.1.</b>
                    
                    jQuery中的$
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.2.2" data-path="../jQuery/Core.html">
            
                <a href="../jQuery/Core.html">
            
                    
                        <b>8.2.2.</b>
                    
                    $(document).ready()
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.2.3" data-path="../jQuery/Selector.html">
            
                <a href="../jQuery/Selector.html">
            
                    
                        <b>8.2.3.</b>
                    
                    jQuery选择符
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="8.3" data-path="../jQuery/Extendselector.html">
            
                <a href="../jQuery/Extendselector.html">
            
                    
                        <b>8.3.</b>
                    
                    jQuery的扩展选择符
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.4" data-path="../jQuery/Event.html">
            
                <a href="../jQuery/Event.html">
            
                    
                        <b>8.4.</b>
                    
                    jQuery事件处理
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.5" data-path="../jQuery/Css.html">
            
                <a href="../jQuery/Css.html">
            
                    
                        <b>8.5.</b>
                    
                    jQuery与CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.6" data-path="../jQuery/Effect.html">
            
                <a href="../jQuery/Effect.html">
            
                    
                        <b>8.6.</b>
                    
                    jQuery特效
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.7" data-path="../jQuery/Ajax.html">
            
                <a href="../jQuery/Ajax.html">
            
                    
                        <b>8.7.</b>
                    
                    jQuery与AJAX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.8" data-path="../jQuery/Cases.html">
            
                <a href="../jQuery/Cases.html">
            
                    
                        <b>8.8.</b>
                    
                    jQuery应用案例
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="8.8.1" data-path="../jQuery/Gotop.html">
            
                <a href="../jQuery/Gotop.html">
            
                    
                        <b>8.8.1.</b>
                    
                    返回顶部
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.8.2" data-path="../jQuery/slide.html">
            
                <a href="../jQuery/slide.html">
            
                    
                        <b>8.8.2.</b>
                    
                    图片轮播
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="8.8.3" data-path="../jQuery/checkall.html">
            
                <a href="../jQuery/checkall.html">
            
                    
                        <b>8.8.3.</b>
                    
                    全选按钮
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    
        
        <li class="header">Node.js</li>
        
        
    
        <li class="chapter " data-level="9.1" data-path="../nodejs/Readme.html">
            
                <a href="../nodejs/Readme.html">
            
                    
                        <b>9.1.</b>
                    
                    Node.js简介
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.2" data-path="../nodejs/npm.html">
            
                <a href="../nodejs/npm.html">
            
                    
                        <b>9.2.</b>
                    
                    NPM简介
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.3" data-path="../nodejs/start.html">
            
                <a href="../nodejs/start.html">
            
                    
                        <b>9.3.</b>
                    
                    Node.js起步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.4" data-path="../nodejs/coreModule.html">
            
                <a href="../nodejs/coreModule.html">
            
                    
                        <b>9.4.</b>
                    
                    Node.js核心模块
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="9.4.1" data-path="../nodejs/events.html">
            
                <a href="../nodejs/events.html">
            
                    
                        <b>9.4.1.</b>
                    
                    Events
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.4.2" data-path="../nodejs/fs.html">
            
                <a href="../nodejs/fs.html">
            
                    
                        <b>9.4.2.</b>
                    
                    File System
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.4.3" data-path="../nodejs/buffer.html">
            
                <a href="../nodejs/buffer.html">
            
                    
                        <b>9.4.3.</b>
                    
                    buffer
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.4.4" data-path="../nodejs/stream.html">
            
                <a href="../nodejs/stream.html">
            
                    
                        <b>9.4.4.</b>
                    
                    stream
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="9.4.5" data-path="../nodejs/http.html">
            
                <a href="../nodejs/http.html">
            
                    
                        <b>9.4.5.</b>
                    
                    http
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    
        
        <li class="header">Vue.js</li>
        
        
    
        <li class="chapter " data-level="10.1" data-path="../vue/intro.html">
            
                <a href="../vue/intro.html">
            
                    
                        <b>10.1.</b>
                    
                    Vue.js简介
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="10.2" data-path="../vue/vuecli.html">
            
                <a href="../vue/vuecli.html">
            
                    
                        <b>10.2.</b>
                    
                    Vue.js开发环境的搭建
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="10.3" data-path="../vue/object.html">
            
                <a href="../vue/object.html">
            
                    
                        <b>10.3.</b>
                    
                    Vue.js实例对象
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="10.4" data-path="../vue/component.html">
            
                <a href="../vue/component.html">
            
                    
                        <b>10.4.</b>
                    
                    Vue.js组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="10.5" data-path="../vue/template.html">
            
                <a href="../vue/template.html">
            
                    
                        <b>10.5.</b>
                    
                    Vue.js模板语法
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="10.5.1" data-path="../vue/text.html">
            
                <a href="../vue/text.html">
            
                    
                        <b>10.5.1.</b>
                    
                    Vue.js文本渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    
        
        <li class="header">附录</li>
        
        
    
        <li class="chapter " data-level="11.1" data-path="../References.html">
            
                <a href="../References.html">
            
                    
                        <b>11.1.</b>
                    
                    参考文献
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >样式级联</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="&#x6837;&#x5F0F;&#x7EA7;&#x8054;">&#x6837;&#x5F0F;&#x7EA7;&#x8054;</h1>
<p>&#x6837;&#x5F0F;&#x8868;&#x5171;&#x6709;&#x4E09;&#x4E2A;&#x6765;&#x6E90;&#xFF1A;&#x4F5C;&#x8005;&#x3001;&#x7528;&#x6237;&#x4EE5;&#x53CA;&#x7528;&#x6237;&#x4EE3;&#x7406;&#xFF08;&#x901A;&#x5E38;&#x4E3A;&#x6D4F;&#x89C8;&#x5668;&#xFF09;&#x3002;</p>
<ol>
<li>&#x4F5C;&#x8005;&#x6307;&#x7684;&#x662F;&#x6E90;&#x6587;&#x4EF6;&#x7684;&#x521B;&#x4F5C;&#x8005;&#x3002;&#x4ED6;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x524D;&#x9762;&#x53D9;&#x8FF0;&#x7684;&#x4E09;&#x79CD;&#x65B9;&#x5F0F;&#x6307;&#x5B9A;&#x6837;&#x5F0F;&#x8868;&#x3002;</li>
<li>&#x7528;&#x6237;&#x3002;&#x7528;&#x6237;&#x53EF;&#x5BF9;&#x7279;&#x5B9A;&#x6587;&#x6863;&#x6307;&#x5B9A;&#x6837;&#x5F0F;&#x4FE1;&#x606F;&#xFF0C;&#x4F8B;&#x5982;&#xFF1A;&#x7528;&#x6237;&#x6307;&#x5B9A;&#x5305;&#x542B;&#x6837;&#x5F0F;&#x4FE1;&#x606F;&#x7684;&#x6587;&#x4EF6;&#x3002;</li>
<li>&#x6D4F;&#x89C8;&#x5668;&#x3002; &#x6D4F;&#x89C8;&#x5668;&#x80AF;&#x5B9A;&#x4F1A;&#x5E94;&#x7528;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#x3002;</li>
</ol>
<p>CSS&#x5C42;&#x7EA7;&#x4E3A;&#x6BCF;&#x4E2A;&#x6837;&#x5F0F;&#x6307;&#x5B9A;&#x6743;&#x91CD;&#x3002;&#x5F53;&#x5E94;&#x7528;&#x591A;&#x6761;&#x89C4;&#x5219;&#x65F6;&#xFF0C;&#x6743;&#x91CD;&#x6700;&#x9AD8;&#x7684;&#x89C4;&#x5219;&#x4F18;&#x5148;&#x3002;</p>
<p>&#x5C42;&#x7EA7;&#x6837;&#x5F0F;&#x8868;&#x4E4B;&#x6240;&#x4EE5;&#x53EB;&#x4F5C;&#x201C;&#x5C42;&#x7EA7;&#x201D;&#xFF0C;&#x5C31;&#x662F;&#x89C4;&#x5219;&#x53EF;&#x4EE5;&#x91CD;&#x53E0;&#x3001;&#x53EF;&#x4EE5;&#x5D4C;&#x5957;&#x3002;&#x8FD9;&#x6837;&#x5C31;&#x4EA7;&#x751F;&#x4E86;&#x65B0;&#x7684;&#x95EE;&#x9898;&#xFF1A;&#x5F53;&#x89C4;&#x5219;&#x91CD;&#x53E0;&#x65F6;&#xFF0C;CSS&#x662F;&#x5982;&#x4F55;&#x51B3;&#x5B9A;&#x91C7;&#x7528;&#x54EA;&#x4E2A;&#x89C4;&#x5219;&#x5462;&#xFF1F;&#x603B;&#x7684;&#x539F;&#x5219;&#x662F;&#xFF0C;&#x6743;&#x91CD;&#x8D8A;&#x9AD8;&#x7684;&#x89C4;&#x5219;&#x4F18;&#x5148;&#xFF0C;&#x76F8;&#x540C;&#x6743;&#x91CD;&#x7684;&#x89C4;&#x5219;&#xFF0C;&#x540E;&#x9762;&#x6700;&#x51FA;&#x73B0;&#x7684;&#x89C4;&#x5219;&#x5C06;&#x8986;&#x76D6;&#x524D;&#x9762;&#x7684;&#x89C4;&#x5219;&#x3002;&#x5982;&#xFF1A;</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">p</span> {
  <span class="hljs-attribute">background</span>: orange;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">24px</span>;
}
<span class="hljs-selector-tag">p</span> {
  <span class="hljs-attribute">background</span>: green;
}
</code></pre>
<p>&#x6D4F;&#x89C8;&#x5668;&#x5728;&#x6E32;&#x67D3;&#x9875;&#x9762;&#x65F6;&#xFF0C;&#x4F1A;&#x4ECE;&#x4E0A;&#x81F3;&#x4E0B;&#x6267;&#x884C;CSS&#x89C4;&#x5219;&#xFF0C;&#x8FD9;&#x6837;&#xFF0C;&#x4E0A;&#x8FF0;&#x4EE3;&#x7801;&#x4E2D;&#x4E00;&#x5F00;&#x59CB;&#x58F0;&#x660E;&#x7684;&#x6BB5;&#x843D;&#x6A59;&#x8272;&#x80CC;&#x666F;&#xFF0C;&#x4F1A;&#x88AB;&#x968F;&#x540E;&#x58F0;&#x660E;&#x7684;&#x6BB5;&#x843D;&#x7EFF;&#x8272;&#x80CC;&#x666F;&#x53D6;&#x4EE3;&#x3002;</p>
<p>&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4F5C;&#x8005;&#x521B;&#x5EFA;&#x7684;&#x89C4;&#x5219;&#x6743;&#x91CD;&#x9AD8;&#x4E8E;&#x7528;&#x6237;&#x521B;&#x5EFA;&#x7684;&#x89C4;&#x5219;&#x3002;&#x4F5C;&#x8005;&#x548C;&#x7528;&#x6237;&#x521B;&#x5EFA;&#x7684;&#x89C4;&#x5219;&#x4F18;&#x5148;&#x7EA7;&#x522B;&#x9AD8;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;&#x9ED8;&#x8BA4;&#x89C4;&#x5219;&#x3002;</p>
<h2 id="&#x7EA7;&#x8054;&#x987A;&#x5E8F;">&#x7EA7;&#x8054;&#x987A;&#x5E8F;</h2>
<p>&#x6D4F;&#x89C8;&#x5668;&#x6309;&#x7167;&#x5982;&#x4E0B;&#x89C4;&#x5219;&#x5BFB;&#x627E;&#x5143;&#x7D20;&#x548C;&#x5C5E;&#x6027;&#x7684;&#x503C;&#xFF1A;</p>
<ol>
<li>&#x4E3A;&#x4E0D;&#x540C;&#x5A92;&#x4F53;&#x7C7B;&#x578B;&#x67E5;&#x627E;&#x6240;&#x6709;&#x5E94;&#x7528;&#x89C4;&#x5219;&#x3002;</li>
<li>&#x6309;&#x7167;&#x91CD;&#x8981;&#x7EA7;&#x522B;&#xFF08;normal or important&#xFF09;&#x548C;&#x6765;&#x6E90;&#xFF08;author, user, or user agent&#xFF09;&#x5BF9;&#x89C4;&#x5219;&#x8FDB;&#x884C;&#x6392;&#x5E8F;&#x3002;<ol>
<li>&#x6D4F;&#x89C8;&#x5668;&#x58F0;&#x660E;&#x7684;&#x89C4;&#x5219;</li>
<li>&#x7528;&#x6237;&#x58F0;&#x660E;&#x7684;&#x666E;&#x901A;&#x89C4;&#x5219;</li>
<li>&#x4F5C;&#x8005;&#x58F0;&#x660E;&#x7684;&#x666E;&#x901A;&#x89C4;&#x5219;</li>
<li>&#x4F5C;&#x8005;&#x58F0;&#x660E;&#x7684;&#x91CD;&#x8981;&#x89C4;&#x5219;</li>
<li>&#x7528;&#x6237;&#x6307;&#x5B9A;&#x7684;&#x91CD;&#x8981;&#x89C4;&#x5219;</li>
</ol>
</li>
<li>&#x9009;&#x62E9;&#x7B26;&#x8D8A;&#x5177;&#x4F53;&#x7684;&#x89C4;&#x5219;&#x8D8A;&#x4F18;&#x5148;&#x3002;&#x4F2A;&#x5143;&#x7D20;&#x548C;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#x88AB;&#x89C6;&#x4E3A;&#x6B63;&#x5E38;&#x5143;&#x7D20;&#x548C;&#x7C7B;&#x3002;&#x6700;&#x540E;&#xFF0C;&#x6309;&#x7167;&#x5177;&#x4F53;&#x7A0B;&#x5EA6;&#x8FDB;&#x884C;&#x6392;&#x5E8F;&#xFF0C;&#x5982;&#x679C;&#x4E24;&#x4E2A;&#x9009;&#x62E9;&#x7B26;&#x62E5;&#x6709;&#x76F8;&#x540C;&#x7684;&#x6743;&#x91CD;&#x3001;&#x6765;&#x6E90;&#x548C;&#x5177;&#x4F53;&#x7A0B;&#x5EA6;&#xFF0C;&#x5219;&#x540E;&#x51FA;&#x73B0;&#x7684;&#x89C4;&#x5219;&#x4F18;&#x5148;&#x3002;</li>
</ol>
<h2 id="important-&#x89C4;&#x5219;">!important &#x89C4;&#x5219;</h2>
<p><code>!important</code>&#x58F0;&#x660E;&#x7684;&#x89C4;&#x5219;&#x4F18;&#x5148;&#x7EA7;&#x522B;&#x9AD8;&#x4E8E;&#x6B63;&#x5E38;&#x65B9;&#x5F0F;&#x58F0;&#x660E;&#x7684;&#x89C4;&#x5219;&#xFF0C;&#x5E76;&#x4E14;&#x7528;&#x6237;&#x7533;&#x660E;&#x7684;<code>!important</code>&#x89C4;&#x5219;&#x4F18;&#x5148;&#x4E8E;&#x4F5C;&#x8005;&#x6307;&#x5B9A;&#x7684;<code>!important</code>&#x89C4;&#x5219;&#x3002;</p>
<h2 id="&#x9009;&#x62E9;&#x7B26;&#x4F18;&#x5148;&#x7EA7;&#x522B;">&#x9009;&#x62E9;&#x7B26;&#x4F18;&#x5148;&#x7EA7;&#x522B;</h2>
<p>&#x9664;&#x4E86;&#x5148;&#x540E;&#x987A;&#x5E8F;&#x5916;&#xFF0C;CSS&#x8FD8;&#x6309;&#x7167;&#x9009;&#x62E9;&#x7B26;&#x7684;&#x5177;&#x4F53;&#x7A0B;&#x5EA6;&#x6765;&#x51B3;&#x5B9A;&#x4F18;&#x5148;&#x7EA7;&#x522B;&#xFF0C;&#x5177;&#x4F53;&#x8BA1;&#x7B97;&#x89C4;&#x5219;&#x5982;&#x4E0B;&#xFF1A;</p>
<ol>
<li>&#x8BA1;&#x7B97;&#x5143;&#x7D20;&#x4E2D;&#x7684;style&#x5C5E;&#x6027;&#x7684;&#x503C;&#xFF0C;&#x5982;&#x679C;&#x8BBE;&#x5B9A;&#x4E86;style&#x5C5E;&#x6027;&#xFF0C;&#x5219;a=1&#x3002;</li>
<li>&#x8BA1;&#x7B97;&#x9009;&#x62E9;&#x7B26;&#x4E2D;&#x7684;ID&#x9009;&#x62E9;&#x7B26;&#x6570;&#x91CF;(= b)&#x3002;</li>
<li>&#x8BA1;&#x7B97;&#x9009;&#x62E9;&#x7B26;&#x4E2D;&#x7684;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#x3001;&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x7B26;&#x548C;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#x6570;&#x91CF;(= c)&#x3002;</li>
<li>&#x8BA1;&#x7B97;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;&#x548C;&#x4F2A;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;&#x7684;&#x6570;&#x91CF;(= d)</li>
<li>&#x5FFD;&#x7565;&#x901A;&#x914D;&#x9009;&#x62E9;&#x7B26;&#x3002;</li>
<li>&#x5C06;a-b-c-d&#x7684;&#x503C;&#x8FDE;&#x63A5;&#x5728;&#x4E00;&#x8D77;&#x5C31;&#x5F97;&#x5230;&#x9009;&#x62E9;&#x7B26;&#x7684;&#x4F18;&#x5148;&#x7EA7;&#x522B;&#xFF0C;&#x8BE5;&#x503C;&#x8D8A;&#x5927;&#xFF0C;&#x4F18;&#x5148;&#x7EA7;&#x522B;&#x8D8A;&#x9AD8;&#x3002;</li>
</ol>
<p>&#x4F8B;&#x5982;&#xFF1A;</p>
<pre><code class="lang-css"> *             {}  /* a=0 b=0 c=0 d=0 -&gt; specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -&gt; specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -&gt; specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -&gt; specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -&gt; specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -&gt; specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -&gt; specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -&gt; specificity = 0,1,0,0 */
 style=&quot;&quot;          /* a=1 b=0 c=0 d=0 -&gt; specificity = 1,0,0,0 */
</code></pre>
<h2 id="&#x6269;&#x5C55;&#x9605;&#x8BFB;&#x8D44;&#x6599;">&#x6269;&#x5C55;&#x9605;&#x8BFB;&#x8D44;&#x6599;</h2>
<ol>
<li><a href="https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity" target="_blank">https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity</a></li>
<li><a href="https://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#cascade" target="_blank">https://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#cascade</a></li>
</ol>
<p><div id="page-footer" class="localized-footer"><hr><p><em>By <a href="http://yangzh.cn" target="_blank">yangzh</a>&#xFF0C;&#x4F7F;&#x7528;<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">&#x77E5;&#x8BC6;&#x5171;&#x4EAB; &#x7F72;&#x540D;-&#x76F8;&#x540C;&#x65B9;&#x5F0F;&#x5171;&#x4EAB; 4.0&#x534F;&#x8BAE;</a>&#x53D1;&#x5E03;</em></p>
</div></p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="selector.html" class="navigation navigation-prev " aria-label="Previous page: CSS选择器">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="unit.html" class="navigation navigation-next " aria-label="Next page: CSS中的度量单位">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"样式级联","level":"3.5","depth":1,"next":{"title":"CSS中的度量单位","level":"3.6","depth":1,"path":"css/unit.md","ref":"css/unit.md","articles":[]},"previous":{"title":"CSS选择器","level":"3.4","depth":1,"path":"css/selector.md","ref":"css/selector.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-sharing","sharing-plus","localized-footer","include-codeblock","ace","-lunr","-search","search-pro","collapsible-menu","bibtex-indexed-cite","-livereload"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"collapsible-menu":{},"ace":{},"search-pro":{},"sharing-plus":{"qq":false,"all":["facebook","google","twitter","instapaper","linkedin","pocket","stumbleupon"],"douban":false,"facebook":true,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":true,"messenger":false,"line":false,"vk":false,"pocket":true,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"localized-footer":{"filename":"./FOOTER.md","hline":true},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"bibtex-indexed-cite":{"path":"/"},"include-codeblock":{"check":false,"edit":false,"fixlang":false,"lang":"","template":"ace","theme":"chrome","unindent":true},"sharing":{"qq":true,"all":["facebook","google","twitter","weibo","qq","linkedin","qzone","douban"],"douban":false,"facebook":false,"weibo":true,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":false,"messenger":false,"line":false,"vk":false,"pocket":false,"google":false,"viber":false,"stumbleupon":false,"qzone":true,"linkedin":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":true}},"theme":"default","author":"yangjh","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"bibCount":0,"variables":{},"title":"前端开发2018","links":{"sidebar":{"Home":"http://yangzh.cn","开始之前":"http://yangjh.gitee.io/appendix"}},"bib":[{"citationKey":"SCOTT-2009","entryType":"BOOK","entryTags":{"AUTHOR":"Chacon Scott","URL":"http://git-scm.com/book/zh","ADDRESS":"Berkeley, CA : New York","TIMESTAMP":"2014.10.11","ISBN":"9781430218333","TITLE":"Pro Git","LANGUAGE":"English","PUBLISHER":"Apress","YEAR":"2009","EDITION":"1 edition"}},{"citationKey":"QDL-2012","entryType":"BOOK","entryTags":{"AUTHOR":"丹尼尔·平克","ADDRESS":"北京","TIMESTAMP":"2015.12.25","ISBN":"978-7-300-14930-1","TITLE":"驱动力","LANGUAGE":"zh","TRANSLATOR":"龚怡屏","PUBLISHER":"中国人民大学出版社","YEAR":"2012","URLDATE":"2015-12-25"}},{"citationKey":"LINUX-2001","entryType":"BOOK","entryTags":{"AUTHOR":"李纳斯·托沃兹, 大卫·戴蒙","ADDRESS":"北京","TIMESTAMP":"2015.12.25","ISBN":"978-7-5006-4342-5","TITLE":"乐者为王","LANGUAGE":"zh","TRANSLATOR":"王秋海","PUBLISHER":"中国青年出版社","YEAR":"2001","URLDATE":"2015-12-25"}},{"citationKey":"FREEMAN-2005","entryType":"BOOK","entryTags":{"AUTHOR":"费曼","ADDRESS":"北京","TIMESTAMP":"2015.12.26","ISBN":"978-7-108-01619-5","TITLE":"别闹了，费曼先生","LANGUAGE":"zh","TRANSLATOR":"吴程远","PUBLISHER":"生活·读书·新知三联书店","YEAR":"2005","URLDATE":"2015-12-25"}},{"citationKey":"XJBBC-2015","entryType":"ONLINE","entryTags":{"CITEDATE":"2015-12-25","AUTHOR":"萧井陌","URL":"http://zhuanlan.zhihu.com/xiao-jing-mo/19959253","OWNER":"yangjh","GROUPS":"计算机","TIMESTAMP":"2015.12.25","TITLE":"编程入门指南 v1.4 - 萧井陌的专栏 - 知乎专栏","YEAR":"2015","URLDATE":"2015-12-25"}},{"citationKey":"JJG-2005","entryType":"ONLINE","entryTags":{"CITEDATE":"2015/11/23","AUTHOR":"Jesse James Garrett","URL":"https://courses.cs.washington.edu/courses/cse490h/07sp/readings/ajax_adaptive_path.pdf","OWNER":"yangjh","GROUPS":"计算机","TIMESTAMP":"2015.11.23","TITLE":"Ajax: A New Approach to Web Applications","LANGUAGE":"en","YEAR":"2005"}},{"citationKey":"LIAOXUEFENG-2014","entryType":"ONLINE","entryTags":{"CITEDATE":"2014-10-11","AUTHOR":"廖雪峰","URL":"http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000","OWNER":"yangjh","GROUPS":"计算机","TIMESTAMP":"2014.10.11","TITLE":"Git教程","LANGUAGE":"zh","YEAR":"2014","URLDATE":"2014-10-11"}},{"citationKey":"W3C-2014A","entryType":"ONLINE","entryTags":{"AUTHOR":"W3C","TITLE":"HTML5","YEAR":"2014","URL":"http://www.w3.org/TR/html5/","URLDATE":"2015-05-17","CITEDATE":"2015-5-17","TIMESTAMP":"2015.05.17"}},{"citationKey":"W3C-2014","entryType":"ONLINE","entryTags":{"AUTHOR":"W3C","TITLE":"Standards - W3C","YEAR":"2014","URL":"http://www.w3.org/standards/","LANGUAGE":"en","URLDATE":"2014-10-27","CITEDATE":"2014-10-27","TIMESTAMP":"2014.10.27"}},{"citationKey":"JEFFREY-2005","entryType":"BOOK","entryTags":{"AUTHOR":"Zeldman Jeffrey","ADDRESS":"北京","TIMESTAMP":"2014.10.27","ISBN":"9787505398368","TITLE":"网站重构——应用Web标准进行设计","LANGUAGE":"zh","TRANSLATOR":"傅捷 and 王宗义 and 祝军","PUBLISHER":"电子工业出版社","YEAR":"2005"}},{"citationKey":"W3C-2016","entryType":"ONLINE","entryTags":{"AUTHOR":"W3C","TITLE":"Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification","YEAR":"2016","URL":"https://www.w3.org/TR/2011/REC-CSS2-20110607/","URLDATE":"2016-03-17","CITEDATE":"2016-3-17"}},{"citationKey":"CHANG-2014","entryType":"ONLINE","entryTags":{"AUTHOR":"Decill Chang","TITLE":"他真的不是我兄弟：像素跟點大不同","YEAR":"2014","URL":"http://blog.fourdesire.com/2014/12/11/ta-zhen-de-bu-shi-wo-xiong-di-xiang-su-gen-dian-da-bu-tong/","URLDATE":"2016-04-22","CITEDATE":"2016-04-22","JOURNAL":"Fourdesire"}},{"citationKey":"W3C-2011A","entryType":"ONLINE","entryTags":{"AUTHOR":"W3C","TITLE":"CSS Color Module Level 3","YEAR":"2011","URL":"https://www.w3.org/TR/css3-color/","URLDATE":"2016-04-22","CITEDATE":"2016-04-22"}},{"citationKey":"BOSETEMADKEMPER-2014","entryType":"ONLINE","entryTags":{"AUTHOR":"Bos, Bert and Etemad, Elika J. and Kemper, Brad","TITLE":"CSS Backgrounds and Borders Module Level 3","YEAR":"2014","URL":"https://www.w3.org/TR/css3-background/","URLDATE":"2016-04-19","CITEDATE":"2016-4-19","TYPE":"text"}},{"citationKey":"MOZILLAFOUNDATION-2015A","entryType":"ONLINE","entryTags":{"AUTHOR":"The Mozilla Foundation","TITLE":"JavaScript textbar MDN","YEAR":"2015","URL":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript","URLDATE":"2015-05-26","CITEDATE":"2015-5-26","TIMESTAMP":"2015.05.26"}}],"gitbook":"*"},"file":{"path":"css/cascade.md","mtime":"2018-06-12T01:14:59.875Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-22T06:48:40.011Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-ace/ace/ace.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-ace/ace.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-collapsible-menu/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

